import React, {Component} from 'react';

import {Keyboard, KeyboardAvoidingView, Modal, StyleSheet, TextInput, TouchableOpacity, View} from 'react-native';
import {Button} from "teaset";
import ToastManager from "../../config/manager/ToastManager";

export default class ReplyPopWin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            inputContent: '',
            isUpdateUserInfo: false,
            item: {},
        };
    }

    componentDidMount() {

    }

    render() {
        return (
            <View style={styles.container}>
                <Modal
                    transparent={true}
                    visible={this.state.show}
                    onRequestClose={() => this.closeModal()}
                >
                    <TouchableOpacity
                        onPress={() => this.closeModal()}
                        style={styles.modalContainer}
                    >
                        <KeyboardAvoidingView style={styles.container} behavior={__IOS__ ? 'position' : null}>
                            <View style={styles.replyContent}>
                                <TextInput
                                    autoFocus={true}
                                    style={styles.replyInput}
                                    placeholder={'请输入评论内容'}
                                    ref={(e) => this.textInput = e}
                                    onChangeText={(text) => {
                                        this.setState({
                                            inputContent: text
                                        });
                                    }}
                                />
                                <Button
                                    title={'发送'}
                                    style={styles.btnItemStyle}
                                    titleStyle={styles.btnTitleStyle}
                                    onPress={this.onSubmitComment}
                                />

                            </View>
                        </KeyboardAvoidingView>
                    </TouchableOpacity>
                </Modal>
            </View>
        );
    }

    onSubmitComment = async () => {
        let {item, inputContent, successCallback} = this.state;
        let url = ServicesApi.api_indexAddComment;
        let data = {
            moment_id: item.id,
            content: inputContent,
        };
        if (inputContent.length === 0) {
            ToastManager.show('请输入评论内容');
            return;
        }
        Keyboard.dismiss();
        const result = await Services.post(url, data);
        if (result.code === StatusCode.SUCCESS.code) {
            this.setState({inputContent: ''});
            this.textInput.clear();
            this.closeModal();
            successCallback && successCallback();
        }
    };

    closeModal() {
        this.setState({show: false})
    }

    showModal(item, successCallback) {
        this.setState({
            item,
            show: true,
            successCallback: successCallback,
            isUpdateUserInfo: false
        });
    }
}

const styles = StyleSheet.create({
    container: {
        width: SCREEN_WIDTH,
    },
    modalContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-end',
    },
    replyContent: {
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 15,
        borderTopWidth: Theme.minPixel,
        borderColor: '#ddd',
        backgroundColor: '#f2f2f2',
        justifyContent: 'space-between',
    },
    replyInput: {
        flex: 1,
        height: 45,
        fontSize: 15,
        color: '#333',
        marginRight: 15,
        borderColor: '#333',
        borderBottomWidth: Theme.minPixel,
    },
    btnItemStyle: {
        borderColor: '#333',
        backgroundColor: '#333',
    },
    btnTitleStyle: {
        color: '#fff',
    },
});
